<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'
import { newsData } from '@/mock/news.ts'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'

import { fetchGetReward } from '@/api/task.ts'
import { fetchCompletedNewsData } from '@/api/news'

import BiPopup from '@/components/bi-popup/index.vue'
import BiTaskCard from '@/components/bi-task-card/index.vue'
import BiNavBar from '@/components/bi-navbar/index.vue'

const router = useRouter()
const userStore = useUserStore()

interface News {
    informationId: number,
    isReceive: boolean
}
const completedNews = ref<News[]>([])
const handleFetchCompeletedNewsData = async () => {
    try {
        completedNews.value = (await fetchCompletedNewsData({ device: userStore.device })).data.data
    } catch (error) {
        throw new Error(error as string)
    }
}
handleFetchCompeletedNewsData()

const taskName = (type: string) => {
    return `Read news in the ${type}`
}
const enum Status {
    finish = 0,
    unComplete = 0,
    unReceive = 1,
}
const currentNewsStatus = (id: number) => {
    const news = completedNews.value.find(item => item.informationId == id)

    if (typeof news === 'undefined') {
        return Status.unComplete
    }

    return news.isReceive ? Status.finish : Status.unReceive
}
const finishCount = (id: number): number => {
    const curr = completedNews.value.findIndex(item => item.informationId == id) > -1
    return curr ? 1 : 0
}


const showPopup = ref(false)
const openRewardPopup = () => {
    showPopup.value = true
}
const closeRewardPopup = () => {
    showPopup.value = false
}

const infomationId = ref(0)
const operationDailyFn = (news: any) => {
    if (currentNewsStatus(news.id) === Status.unReceive) {
        infomationId.value = news.id
        openRewardPopup()
    } else {
        window.location.href = `${news.url}?device=${userStore.device}&time=${news.time}`
    }
}
const handleGetRewards = async () => {
    try {
        await fetchGetReward({
            deviceInfo: userStore.device,
            pointsType: 38,
            points: 300,
            informationId: infomationId.value,
            remarks: `领取 ${infomationId.value} 链接的奖励`
        })
        showToast('Receive successfully');
        closeRewardPopup()
        handleFetchCompeletedNewsData()
        userStore.handleGetUserInfo()
    } catch (error) {
        throw new Error(error as string)
    }
}

</script>

<template>
    <div class="info">
        <BiNavBar title="Exchange" @click-left="router.back" background-color="transparent" />
        <main class="info-main">
            <h1 class="info-title">Read News</h1>
            <ul class="info-list">
                <li v-for="news in newsData">
                    <BiTaskCard @btn-click="operationDailyFn(news)" type="flame" :name="taskName(news.type)" :icon="`${news.type}.png`"
                        bg="#D4D3F1" :status="currentNewsStatus(news.id)" :finish-count="finishCount(news.id)" :num="300" />
                </li>
            </ul>
        </main>
    </div>

    <!-- 获取浏览咨询奖励的弹窗 -->
    <BiPopup v-model:show="showPopup" @click="handleGetRewards" button-text="Get Wheats" rewards-type="flame" :rewards-num="300" />

</template>

<style scoped lang="scss">
@import url(./news.scss);
</style>